<template>
	<view>
		<view class="tab bg-white padding-tb">
			<scroll-view scroll-x :scroll-into-view="search.state" scroll-with-animation>
				<view class="tab-body">
					<view class="tab-name" @tap="toChangeTab(item)"
						:class="item.id == search.state ? 'themeColor text-bold' : ''" v-for="(item, index) in tabList"
						:key="index" :id="item.id">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="padding list" v-if="list.length > 0">
			<view class="item bg-white radius-lg padding-sm margin-bottom"
				v-for="(item, index) in list"
				:key="item.trade">
				<view class="top">
					<view>
						<text class="text-sm">订单编号：{{ item.trade }}</text>
					</view>
					<view class="text-sm">
						<text class="text-right" :class="'text-' + item.state_text.style.type">{{ item.state_text.text
						}}</text>
					</view>
				</view>
				<view class="project padding-tb-sm" v-for="project in item.projects" :key="project.id"
				@tap="$utils.$page.open('/pages/order/detail?trade=' + item.trade)">
					<image :src="project.thumb" mode="aspectFill" class="image"></image>
					<view class="proBox padding-left-sm">
						<view class="nameandtime">
							<view class="name text-bold text-black">{{ project.service_title }}</view>
							<view class="time text-gray text-sm" v-if="project.duration">{{ project.duration }}分钟</view>
						</view>
						<view class="desc text-sm text-gray margin-bottom-sm">
							{{ project.tips }}
						</view>
						<view class="cost">
							<view class="text-red text-bold">￥{{ project.price }}</view>
							<view class="num text-gray">x{{ project.num }}</view>
						</view>
					</view>
				</view>
				<view class="orderinfo padding-xs text-sm">
					<view class="crow margin-bottom-sm">
						<view class="name">服务技师</view>
						<view class="content">
							<view class="cu-avatar sm round margin-left"
								:style="{ backgroundImage: 'url(' + item.technician_headimg + ')' }"></view>
							<text class="padding-left-xs">{{ item.technician_nickname }}</text>
						</view>
					</view>
					<view class="crow margin-bottom-sm" v-if="item.start_time">
						<view class="name">预约时间</view>
						<view class="content">
							<text>{{ item.start_time }}</text>
						</view>
					</view>
					<view class="crow margin-bottom-sm">
						<view class="name">客户备注</view>
						<view class="content">
							<text>{{ item.remark }}</text>
						</view>
					</view>
					<view class="crow padding-bottom-sm">
						<view class="name">
							<text>实付金额：</text>
						</view>
						<view class="content">
							<text class="text-red text-bold">¥ {{ item.price }}</text>
						</view>
					</view>
					<view class="crow padding-top-sm solid-top" v-if="[0,1,2,3,4,99].includes(item.state)">
						<view class="name"></view>
						<view class="content">
							<template v-if="item.state === 0">
								<button class="cu-btn china-btn-bg sphere round" @tap.stop="toCancel(item)">取消订单</button>
								<button class="cu-btn china-btn-bg round margin-left-xs" @tap.stop="showPay(item)">立即支付</button>
							</template>
							<template v-else-if="item.state === 99">
								<button class="cu-btn lines-gray sphere round" @tap.stop="toDel(item)">删除订单</button>
							</template>
							<template v-else-if="[1, 2,3].includes(item.state)">
								<button class="cu-btn china-btn-bg round margin-left-xs"
									@tap.stop="$utils.$page.open('/pages/order/refund?trade=' + item.trade, true)">申请退款</button>
							</template>
							<!-- <template v-else-if="item.state === 3">
								<button class="cu-btn bg-green round margin-right-xs"
									@tap.stop="addOrderShow = true">延长服务</button>
								<button class="cu-btn china-btn-bg round"
									@tap.stop="$utils.$page.open('/pages/order/comment?trade=' + item.trade, true)">结束服务</button>
							</template> -->
							<template v-else-if="item.state == 4">
								<button class="cu-btn lines-orange sphere round"
									@tap.stop="$utils.$page.open('/pages/order/comment?trade=' + item.trade, true)">订单评价</button>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="vh-100 flex flex-direction justify-center" v-else>
			<emptyData type="notOrder" text="暂无订单"></emptyData>
		</view>

		<!-- 订单取消 -->
		<view class="cu-modal" :class="cancelShow ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-sm bg-white">确定要取消订单吗？</view>
				<view class="grid col-2 padding bg-white">
					<view class="solid-right" @tap="hideCancelShow('cancel')">取消</view>
					<view class="themeColor" @tap="hideCancelShow('confirm')">确定</view>
				</view>
			</view>
		</view>
		<!-- 订单删除 -->
		<view class="cu-modal" :class="deleteShow ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-sm bg-white">确定要删除此订单吗？</view>
				<view class="grid col-2 padding bg-white">
					<view class="solid-right" @tap="hideDeleteShow('cancel')">取消</view>
					<view class="themeColor" @tap="hideDeleteShow('confirm')">确定</view>
				</view>
			</view>
		</view>

		<loading v-if="pageLoading==='loading'" />

		<x-tabbar page="/pages/order/list" />
		<payType :show="payTypeShow" orders-type="reservation" @payCallBack="payCallBack" :price="price_sum" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageLoading: 'more',
			payTypeShow: false,
			search: {
				page: 1,
				limit: 10,
				state: 'all'
			},
			tabList: [
				{ name: '全部', id: 'all' },
				{ name: '待支付', id: 'NOT_PAY' },
				{ name: '已支付', id: 'PAY' },
				{ name: '待服务', id: 'WAIT_START' },
				{ name: '服务中', id: 'SERVICE_ING' },
				{ name: '待评价', id: 'WAIT_COMMENT' },
				{ name: '已完成', id: 'FINISH' },
				{ name: '退款中', id: 'REFUNDING' },
				{ name: '已退款', id: 'REFUND' },
				{ name: '已取消', id: 'CANCEL' },
			],
			list: [],
			selected:null,
			cancelShow: false,
			deleteShow: false,
		};
	},
	computed: {
		price_sum() {
			if (this.selected) {
				return this.selected.price;
			}
			return 0
		}
	},
	onLoad() {
		uni.$on('UPDATE::ORDER', this.toChangeTab);
	},
	unLoad(){
		uni.$off('UPDATE::ORDER', this.toChangeTab);
	},
	onShow(){
		uni.hideTabBar();
		this.toChangeTab();
	},
	onReachBottom() {
		this.search.page++;
		this.getList();
	},
	methods: {
		getList() {
			if (!this.$store.getters.hasLogin||this.pageLoading!=='more') {return;}
			this.pageLoading = 'loading';
			this.$utils.$api.Orders.list(this.search).then(data => {
				this.pageLoading='more';
				this.list = [...this.list, ...data.data];
				if(data.current_page>=data.last_page){
					this.pageLoading='noMore';
				}
			}).catch(() => {
				this.pageLoading='noMore';
			})
		},
		toChangeTab(item) {
			this.pageLoading='more';
			if(item&&item.id){
				this.search.state = item.id;
			}
			this.search.page = 1;
			this.list = [];
			this.getList();
		},


		hideCancelShow(type) {
			this.cancelShow = false;
			if (type == 'confirm') {
				this.pageLoading = true;
				this.$utils.$api.Orders.cancel(this.selected.trade)
				.then(() => {
					this.toChangeTab();
				}).catch(err => {
					this.$utils.$message.error(err.msg);
				}).finally(() => {
					this.pageLoading = false;
				})
			}
			this.selected = null;
		},
		hideDeleteShow(type) {
			this.deleteShow = false;
			if (type == 'confirm') {
				this.pageLoading = true;
				this.$utils.$api.Orders.delete(this.selected.trade)
				.then(() => {
					this.toChangeTab();
				}).catch(err => {
					this.$utils.$message.error(err.msg);
				}).finally(() => {
					this.pageLoading = false;
				})
			}
			this.selected = null;
		},
		toDel(item) {
			this.selected = item;
			this.deleteShow = true;
		},
		toCancel(item) {
			this.selected = item;
			this.cancelShow = true;
		},
		showPay(item) {
			this.selected = item;
			this.payTypeShow = true;
		},
		payCallBack(pay_type) {
			if (pay_type) {
				uni.showLoading({
					title: '获取订单中...',
					mask: true
				})
				this.$utils.$api.Orders.payByOrders({
					trade: this.selected.trade,
					platform: this.$utils.$system.platform(),
					pay_type: pay_type
				}).then(this.pay).catch(err => {
					this.$utils.$message.error(err.msg);
				}).finally(() => {
					uni.hideLoading();
				})
			}
			this.payTypeShow = false;
		},
		pay(res) {
			if (res.code === this.$utils.$http.ResponseCode.SUCCESS) {
				setTimeout(() => {
					uni.showLoading({
						title: '查询中...',
						mask: true
					});
					this.$utils.usePay(res.data).then(() => {
						this.toChangeTab();
						this.$utils.$page.open('/pages/order/payment/payment?trade=' + res.data.order.trade)
					}).catch(err => {
						if(err&&err.msg){
							this.$utils.$message.error(err.msg);
						}
					}).finally(() => {
						uni.hideLoading();
					});
				}, 300)
			} else if (res.code === this.$utils.$http.ResponseCode.PAY_SUCCESS) {
				this.toChangeTab();
				this.$utils.$page.open('/pages/order/payment/payment?trade=' + res.data.order.trade)
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.tab {
	width: 100%;
	z-index: 9999;
	position: fixed;
}

.tab-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;

	.tab-name {
		// 不许换行
		white-space: nowrap;
		padding: 0 20rpx;
	}
}
.vh-100{
	min-height: calc(90vh - var(--window-top));
}
.list {
	padding-top: 110rpx;
}

.item {
	.top {
		display: flex;
		justify-content: space-between;
	}

	.project {
		display: flex;

		.image {
			width: 130upx;
			height: 130upx;
			border-radius: 20upx;
		}

		.proBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.nameandtime,
			.cost {
				display: flex;
				justify-content: space-between;
			}
		}
	}
}

.orderinfo {
	.crow {
		justify-content: space-between
	}
}

.text-right {
	&.text- {
		color: var(--theme-color);
	}

	&.text-info {
		color: $u-info;
	}

	&.text-success {
		color: $u-success;
	}

	&.text-danger {
		color: $u-error;
	}

	&.text-warning {
		color: $u-warning;
	}
}</style>
